<script setup>

    // 引入echarts的所有组件
    import CoachCount from "@/components/charts/admin/CoachCount.vue";
    import Total from "@/components/charts/admin/Total.vue";
    import HotCourse from "@/components/charts/admin/HotCourse.vue";
    import UserReserve from "@/components/charts/admin/UserReserve.vue";
    import ReserveCount from "@/components/charts/admin/ReserveCount.vue";
</script>

<template>
    <div class="container">
        <el-row >
            <el-col :span="15">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 150px">
                            <Total></Total>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 400px">
                            <UserReserve></UserReserve>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 200px">
                            <ReserveCount></ReserveCount>
                        </div>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="9">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 325px">
                            <CoachCount></CoachCount>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 445px">
                            <HotCourse></HotCourse>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
    .container{
        /* background-image: radial-gradient(50% 50% at 50% 70%, #545C64, #1A232A); */
        /* border: 1px solid #01093D; */
        min-height: 100%;
        background-color: #F5F5F5;

    }
    .container>.el-row{
        /* background-color: #FFF; */
        padding: 15px;
    }
    .title{
        text-align: center;
        color: #1A232A;
        /* font-weight: bold; */
        font-size: 36px;
        /* background-color: #091440; */
    }
    .el-col .el-col{
        background-color: #FFF;
        /* border: 1px solid #58A6FE; */
        border-radius: 5px;
    }
    .el-row .el-row {
        margin-bottom: 15px;
        margin-right: 15px;
    }

</style>